// COLOR
$color_background = #ffffff
$color_text = #000000
$color_text_reverse = #ffffff
$color_main = #004477
$color_dark = #002255
$color_green = #4caf50
$color_yellow = #ffc107
$color_1 = #9289f3
$color_2 = #aade46
$color_3 = #43a1ff
$color_4 = #d021a5
$color_5 = #f76b1c
$color_6 = #f02fc2
$color_7 = #17ead9
$color_8 = #5D6874

color_(num)
  if (num == 1)
    return $color_1
  else if (num == 2)
    return $color_2
  else if (num == 3)
    return $color_3
  else if (num == 4)
    return $color_4
  else if (num == 5)
    return $color_5
  else if (num == 6)
    return $color_6
  else if (num == 7)
    return $color_7
  else if (num == 8)
    return $color_8

// DIMENSION
$scrollbar_size = 8px
$line_width = 1pt
$font_size = 16pt
$resume_height = auto // (297 / 210) * 100vw // letter radio
$side_width = $font_size * 24
$max_width = auto // $font_size * 77
$min_width = $font_size * 60

*
  margin 0
  padding 0
  box-sizing border-box
  &:focus
    outline none

body
  font-family Arial, Helvetica, Calibri
  line-height 1.5
  font-size $font_size
  &::-webkit-scrollbar
    width $scrollbar_size
    height $scrollbar_size
  &::-webkit-scrollbar-thumb
    background $color_dark

#print
  position fixed
  right $font_size * 2
  bottom $font_size * 2
  height $font_size * 4
  width $font_size * 4
  user-select none
  cursor pointer
  border-radius 50%
  background-size $font_size * 2
  background-position center
  background-repeat no-repeat
  background-color $color_background
  background-image url('print-solid.svg') // License https://fontawesome.com/license/free
  transition box-shadow 0.2s
  &:hover
    box-shadow 0 0 $font_size * 0.5
  &:active
    box-shadow inset 0 0 $font_size * 0.5

#resume
  margin 0 auto
  min-width $min_width
  max-width $max_width
  min-height $resume_height
  overflow hidden
  color $color_text
  background $color_background
  &:after
    display block
    clear both
    content ''

#side, #main
  float left
  display inline-block

#side
  min-height $resume_height
  width $side_width
  color $color_text_reverse
  background $color_main
  line-height 2
  > div
    padding $font_size * 2 $font_size * 2 0 $font_size * 2
    &:before
      margin 0 $font_size * -2
      padding 0 $font_size * 2
  > div:first-child, > div:last-child
    padding $font_size * 2

#avatar
  background $color_dark
  position relative

#photo
  width 100%
  display block

#fileOpen
  width 100%
  height 100%
  position absolute
  left 0
  top 0
  opacity 0
  cursor pointer

#name, #position
  line-height 1.25

#name
  font-size 3em

#position
  font-size 1.25em
  font-style italic
  padding-top $font_size

#personalInfo, #skill, #language
  &:before
    font-size 1.25em
    line-height 2.5
    display block
    content attr(data-label)
    background $color_dark
  > div
    padding-top $font_size
    &:before
      display block
      content attr(data-label)
      font-weight bold
  > div:first-child
    padding-top $font_size * 2

#language
  .ruler
    height $font_size * 4
    > div:first-child
      background $color_green
    > div:last-child
      background $color_yellow
    > div
      display inline-block
      height 100%
  .desc
    > div:before
      content ''
      display block
      float left
      margin $font_size * 0.45 0
      margin-right $font_size
      height $font_size
      width $font_size * 2
    > div:first-child:before
      background $color_green
    > div:last-child:before
      background $color_yellow

#main
  width s('calc(100% - %s)', $side_width)

#intro
  padding $font_size * 2
  line-height 2

#education
  &:before
    padding 0 $font_size * 2
    border-top $line_width solid $color_main
    border-bottom $line_width solid $color_main
    color $color_main
    font-weight bold
    font-size 1.5em
    line-height 2
    display block
    content attr(data-label)
  td
    vertical-align middle
    padding $font_size * 0.25
  > table
    font-size 1em
    line-height 2
    padding $font_size * 2 $font_size * 2 0 $font_size * 2
    width 100%
    border-spacing 0
    .school
      font-size 1.25em
      font-weight bold
    td:nth-child(2)
      text-align right
    .ruler
      padding 0.5em 0
      div
        position absolute
        height $font_size * 0.5
      > div
        position relative
      .sup
        background $color_background
      for i in 1 2 3 4 5 6 7 8
        .sub[data-num=\'{i}\']
          background color_(i)
    .desc
      padding 0.5em 0
      &:after
        display block
        clear both
        content ''
      > div
        float left
        padding-right $font_size
        &:before
          content ''
          display block
          float left
          margin $font_size * 0.45 0
          margin-right $font_size * 0.5
          height $font_size
          width $font_size * 2
      > div:last-child
        padding-right 0
      for i in 1 2 3 4 5 6 7 8
        > div:nth-child({i}):before
          background color_(i)
  > table:last-child
    padding $font_size * 2

#experience, #project
  &:before
    padding 0 $font_size * 2
    border-top $line_width solid $color_main
    border-bottom $line_width solid $color_main
    color $color_main
    font-weight bold
    font-size 1.5em
    line-height 2
    display block
    content attr(data-label)
  td
    vertical-align middle
    padding $font_size * 0.25
  > table
    font-size 1em
    line-height 2
    padding $font_size * 2 $font_size * 2 0 $font_size * 2
    width 100%
    border-spacing 0
    .title
      font-size 1.25em
      font-weight bold
    td:nth-child(2)
      text-align right
  > table:last-child
    padding $font_size * 2

#experience
  .employer
    font-size 1.25em

ul
  list-style-type square

li
  margin-left $font_size

@media print
  #print
    display none
  #resume
    margin 0 !important
    width 100vw !important
  #resume, #side, #main
    height 100vh !important